<template>
	<view class="content">
		<!-- 语音识别组件 -->
		<!-- 【用法1】点击 Slot 组件，自动弹出 -->
		<tf-speech-recognizer @okClick="recognitionHandler"><view>语音识别</view></tf-speech-recognizer>
		<!-- 【用法2】多个入口共用，使用组件接口弹出 -->
		<tf-speech-recognizer ref="recognizer" @okClick="recognitionHandler" />
	</view>
</template>

<script>
//录音
const recorderManager = uni.getRecorderManager();
//播放录音
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
export default {
	components: {},
	data() {
		return {
			title: 'Hello',
			token: '',
			adioFileData: '',
			adioSize: '',
			resContent: '',
			luyinStatus: true
		};
	},
	methods: {
		// 【用法2】使用组件接口弹出
		showRecognizer() {
			this.$refs.recognizer.show();
		},
		// 识别结束的回调
		recognitionHandler(result) {
			console.log('识别结果: ', result);
		}
	}
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200 rpx;
	width: 200 rpx;
	margin-top: 200 rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50 rpx;
}

.text-area {
	display: flex;
	justify-content: center;
	margin-top: 10 vh;
}
.text-area.recordingStyle {
	width: 100 px;
	height: 100 px;
	border-radius: 50 %;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16 px;
	color: #fff;
	background: #409eff;
}
.Sound_btn {
	display: flex;
	align-items: center;
	margin: 10px 0 0 0;
}
.Sound_btn > button {
	background: none;
}
.title {
	font-size: 36rpx;
	color: #8 f8f94;
}
.reslut_box {
	width: 90 %;
	background: #409eff10;
	margin: 1em 5%;
	padding: 0.5em 0;
	border-radius: 10px;
}
.reslut_box p {
	margin: 0 20px;
}
</style>
